<!DOCTYPE html>
<html>

	<head>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/AnimateClass.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.fullPage.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<audio autoplay="" loop="">
			<source src="MP3/SocanGroup-SOCAN.mp3">
		</audio>
		<!--包含全部S-->
		<div id="fullpage">
			<!--首页S-->
			<div class="section index">
				<div class="logo animateClass liang_mimi">
					<img src="img/index/logo.png" alt="" />
				</div>
				<div class="mel1 animated tada">
					<img src="img/index/index_01.png" alt="" />
				</div>
				<div class="mel2 animated rotateInDownLeft">
					<img src="img/index/index_02.png" alt="" />
				</div>
				<div class="mel3 animated jackInTheBox">
					<img src="img/index/index_03.png" alt="" />
				</div>
				<div class="mel4 animated rollIn">
					<img src="img/index/index_04.png" alt="" />
				</div>
				<div class="mel5">
					<img src="img/index/index_11.png" alt="" />
				</div>
				<div class="mel6">
					<img src="img/index/index_14_02.png" alt="" />
				</div>
				<div class="mel7">
					<img src="img/index/index_05.png" alt="" />
				</div>
				<div class="mel8">
					<img src="img/index/index_07.png" alt="" />
				</div>
				<div class="mel9">
					<img src="img/index/index_06.png" alt="" />
				</div>
				<div class="mel10">
					<img src="img/index/index_09.png" alt="" />
				</div>
				<div class="mel11">
					<img src="img/index/index_12_03_03.png" alt="" />
				</div>
				<div class="mel12 animateClass my_animation">
					<img src="img/index/index_12_01_07.png" alt="" />
				</div>
				<div class="mel13">
					<a href="#page1">
						<input type="image" src="img/index/index_10.png" name="" id="" value="" class="mel13_img" />
					</a>
				</div>
				<div class="mel14">
					<img src="img/index/index_4_03.png" alt="" />
				</div>
				<div class="mel15">
					<img src="img/index/index_4_07.png" alt="" />
				</div>
				<div class="mel16">
					<img src="img/index/index_4_03.png" alt="" />
				</div>
				<div class="mel17">
					<img src="img/index/index_55_03.png" alt="" />
				</div>
				<section id="section05" class="demo">
					<a href="#page1"><span></span></a>
				</section>
			</div>
			<!--首页S-->
			<!--内页S-->
			<div class="section page1" id="page1" name="page1">
				<div class="liang1 animated">
					1.请问图中位于中间的男孩姓名是？
				</div>
				<div class="liang2 animated">
					<img src="img/page/yenei_03.png" alt="" />
				</div>
				<div class="liang3 animated">
					<img src="img/index/index_11.png" alt="" />
				</div>
				<div class="liang4 animated">
					<img src="img/page/yenei_04_05.png" alt="" />
				</div>
				<div class="liang5 animated">
					<img src="img/page/yenei_04_03.png" alt="" />
				</div>
				<div class="liang6 animated">
					<img src="img/page/yenei_04_20.png" alt="" onclick="changeIt(this);" />
				</div>
				<div class="liang7 animated">
					<span>A 王俊凯</span>
				</div>
				<div class="liang8 animated">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="liang9">
					<span>B 易烊千玺</span>
				</div>
				<div class="liang10">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="liang10">
					<span>C 王源</span>
				</div>
				<div class="liang11">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="liang11">
					<span>D 王凯</span>
				</div>
				<div class="liang_kugou animateClass my_animation">
					<img src="img/page/yenei_04_31.png" alt="" />
				</div>
				<div class="liang12">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="liang13">
					<img src="img/page/yenei_04_27.png" alt="" />
				</div>
				<div class="liang14">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<div class="liang15">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="liang16">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<section id="section05" class="demo">
					<a href="#page2"><span></span></a>
				</section>
			</div>
			<!--内页E-->
			<!--page2S-->
			<div class="section page2" id="page2">
				<div class="g1">
					2.“削个椰子皮，你却TM给个梨”
					<p>
						请问这是什么歌？</p>
				</div>
				<div class="g2">
					<img src="img/page2/ye2_03.png" alt="" />
				</div>
				<div class="g3">
					<img src="img/index/index_11.png" alt="" />
				</div>
				<div class="g4">
					<img src="img/page/yenei_04_05.png" alt="" />
				</div>
				<div class="g5">
					<img src="img/page/yenei_04_03.png" alt="" />
				</div>
				<div class="g6">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="g7">
					<span>A 《Yogurt》</span>
				</div>
				<div class="g8">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="g9">
					<span>B 《Salt》</span>
				</div>
				<div class="g10">
					<img src="img/page/yenei_04_20.png" alt="" onclick="changeIt(this);" />
				</div>
				<div class="Sugar">
					<span>C 《Sugar》</span>
				</div>
				<div class="g11">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="g11">
					<span>D 《Salad》</span>
				</div>
				<div class="gou animateClass my_animation">
					<img src="img/page/yenei_04_31.png" alt="" />
				</div>
				<div class="g12">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="g13">
					<img src="img/page/yenei_04_27.png" alt="" />
				</div>
				<div class="g14">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<div class="g15">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="g16">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<section id="section05" class="demo">
					<a href="#page3"><span></span></a>
				</section>
			</div>
			<!--page2E-->
			<!--首页S-->
			<div class="section page3" id="page3">
				<div class="y1 animated">
					<p>3.“啊啊 啊啊 啊啊啊”</p>
					<p>请问这是什么歌？</p>
				</div>
				<div class="y2">
					<img src="img/page3/page333_03.png" alt="" />
				</div>
				<div class="y3">
					<img src="img/index/index_11.png" alt="" />
				</div>
				<div class="y4">
					<img src="img/page/yenei_04_05.png" alt="" />
				</div>
				<div class="y5">
					<img src="img/page/yenei_04_03.png" alt="" />
				</div>
				<div class="y6">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="y7">
					<span>A 《新白娘子传奇》</span>
				</div>
				<div class="y8">
					<img src="img/page/yenei_04_20.png" alt="" onclick="changeIt(this);" />
				</div>
				<div class="y9">
					<span>B 《当》</span>
				</div>
				<div class="y10">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="ar">
					<span>C 《忐忑》</span>
				</div>
				<div class="y11">
					<img src="img/page/yenei_04_20.png" alt="" />
				</div>
				<div class="y11">
					<span>D 《Concerto Pour Deux Voix》</span>
				</div>
				<div class="br animateClass my_animation">
					<img src="img/page2/page22_03.png" alt="" />
				</div>
				<div class="y12">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="y13">
					<img src="img/page/yenei_04_27.png" alt="" />
				</div>
				<div class="y14">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<div class="y15">
					<img src="img/page/yenei_04_17.png" alt="" />
				</div>
				<div class="y16">
					<img src="img/page/yenei_04_25.png" alt="" />
				</div>
				<section id="section05" class="demo">
					<a href="#evaluate"><span></span></a>
				</section>
			</div>
			<!--首页E-->
			<!--首页S-->
			<div class="section evaluate" id="evaluate">
				<form action="" method="post">
					<div class="logo animateClass">
						<img src="img/index/logo.png" alt="" />
					</div>
					<div class="ev1 animateClass my_animation">
						<img src="img/page3/enen_03_03.png" alt="" />
					</div>
					<div class="ev2">
						<span class="caoren animated bounceInRight">[潮人测试]</span><span>***太牛了</span>
					</div>
					<div class="ev3 animated bounceInLeft">
						<span>现在坚持个性的人太少了</span>
					</div>
					<div class="ev4 animated bounceInUp">
						<p>看看你和你的朋友亲密度够不？</p>
						<p>一起来评价.</p>
					</div>
					<div class="ev5">
						00后潮人+s
					</div>
					<div class="ev6">
						典型70后
					</div>
					<div class="ev7">
						90后新锐 +2
					</div>
					<div class="ev8">
						90后新锐 +2
					</div>
					<div class="ev9">
						还体现不出你们的亲密度？那就再评价下吧!
					</div>
					<div class="ev_center">
						<div class="ev10">
							<input type="text" name="" id="" value="" />
						</div>
					</div>
					<div class="ev11">
						<input type="submit" name="" id="" value="提交" />
					</div>
				</form>
				<div class="ev12">
					<a href="">
						<input type="button" name="" id="" value="我也要玩" />
					</a>
				</div>
			</div>
			<!--首页E-->
			<!--包含全部E-->
		</div>
		<!--page S-->
		<script type="text/javascript">
			var dex = 0;
			var changeIt = function(obj) {
				dex++;
				if(dex % 2 == 0) {
					obj.src = 'img/page/yenei_04_20.png';
				} else if(dex % 2 == 1) {
					obj.src = 'img/page/yenei_04_14.png';
				}
			}
		</script>
		<!--page1 E-->
		<script type="text/javascript">
			$(document).ready(function() {
				$('#fullpage').fullpage({
					//afterLoad页面触发的信息
					afterLoad: function(anchorLink, index) {
						if(index == 2) {
							//alert("Section 2 ended loading");
							document.querySelector(".liang1").classList.add("bounceInLeft");
							document.querySelector(".liang2").classList.add("pulse");
							document.querySelector(".liang3").classList.add("wobble");
						}
						if(index == 3) {
							//alert("Section 2 ended loading");
							document.querySelector(".g1").classList.add("bounceInLeft");
						}
						if(index == 4) {
							//alert("Section 2 ended loading");
							document.querySelector(".y1").classList.add("bounceInLeft");
						}
						if(index == 5) {
							//alert("Section 2 ended loading");
							document.querySelector(".logo").classList.add("liang_mimi");
						}

					}
				});
			});
		</script>
	</body>

</html>